<template>
  <div class="big-box">
    <div class="box">
      <el-card shadow="never" style="margin: 20px 0;">
        <div slot="header" class="clearfix">
          <span>裁判类别: {{ referee.type }}</span>&nbsp;&nbsp;&nbsp;
          <span>裁判姓名: {{ referee.name }}</span>
          <el-button style="float: right; padding: 3px 0" type="text">{{ scoreData.status }}</el-button>
        </div>
        <div class="">
          <el-row>
            <el-col :span="12">
              <h3>当前比赛项目：</h3>
              <h5>{{ scoreData.type }}-{{ scoreData.projectName }}-{{ scoreData.groups }}</h5>
            </el-col>
            <el-col :span="12">
              <h3>当前比赛队伍：</h3>
              <h5>{{ scoreData.teamName }}</h5>
              <h3>当前比赛队员：</h3>
              <h5>{{ scoreData.athletes.map(e => e.name).join(',') }}</h5>
            </el-col>
          </el-row>
        </div>
        <div class="rate" style="margin: 20px 0;">
          <el-form>
            <el-form-item label="打分">
              <el-col :span="8">
                <el-input width="150px" v-model="score" placeholder="请输入分数"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item v-if="referee.type == '难度裁判'" label="减分">
              <el-col :span="8">
                <el-input width="150px" v-model="subScore" placeholder="请输入分数"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom">
          <el-row type="flex"> 
            <el-col>
              <el-button :disabled="this.scoreStatus != '未打分'" type="success" class="button" style="font-size: 30px;" @click="submitScore">提交打分</el-button>
            </el-col>
            <el-col>
              <el-button type="primary" class="button" style="font-size: 30px;" @click="applyScore">申请修改打分</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import {getNowData,submitscore,applyscore} from '@/api/score'
export default {
  data () {
    return {
      scoreStatus:'',
      scoreId:'',
      scoreData:{},
      refereeId:'',
      timer:null, //定时器名称
      score:null,
      subScore:null
    }
  },
  computed:{
    ...mapState({
      referee:state => state.user.refereeInfo
    }),
  },
  watch: {
    scoreId(newVal,oldVal){
      console.log(newVal,oldVal)
      this.setScoreData()
    }
  },
  created() {
    this.getData();
    this.setTime();
  },
  beforeDestroy(){
    clearInterval(this.timer);// 清除定时器
    this.timer = null;
  },
  methods:{
    setTime(){ 
      //每隔一分钟运行一次保存方法
      this.timer = setInterval(()=>{
        this.getData();
      },5000)
    },
    getData(){
      getNowData().then(res => {
        console.log(res)
        this.scoreId = res.data.applyProject.id
        this.refereeId = res.data.refereeScore.refereeId
        this.scoreStatus = res.data.refereeScore.status
        if( res.data.refereeScore.status == '未打分') {
          return
        } else {
          this.score = res.data.refereeScore.score
          this.subScore = res.data.refereeScore.subScore
        }
      })
    },
    setScoreData() {
      getNowData().then(res => {
        this.scoreData = res.data.applyProject
      })
    },
    applyScore() {
      const params = {
        applyProjectId:this.scoreData.id,
        refereeId:this.refereeId,
        name:this.referee.name,
        type:this.referee.type,
        score:this.score,
        subScore:this.subScore,
        orderId:this.referee.orderId
      }
      applyscore(params).then(res => {
        if(res.code == 200) {
          this.$message({
            type: 'success',
            message: '申请成功!'
          });
        } else {
          this.$message({
            type: 'danger',
            message: '申请失败'
          });       
        }
      })
    },
    submitScore() {
      this.$confirm('此操作将提交打分, 是否继续?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          applyProjectId:this.scoreData.id,
          idCard:this.referee.idCard,
          name:this.referee.name,
          type:this.referee.type,
          score:this.score,
          subScore:this.subScore,
          orderId:this.referee.orderId
        }
        submitscore(params).then(res => {
          if(res.code == 200) {
            this.$message({
              type: 'success',
              message: '打分成功!'
            });
          } else {
            this.$message({
              type: 'danger',
              message: '打分失败'
            });       
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消打分'
        });          
      });
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-rate {
  height: 50px;
}
.el-rate__icon {
  font-size: 50px;
  margin-right: 6px;
  color: #C0C4CC;
  transition: .3s;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  text-align: center;
}
.big-box {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/bg.jpg) center center no-repeat;
  background-size: cover;
}
@media screen and (max-width:1200px) {
  .box {
    width: 90%;
  }
}
</style>